<template>
    <Tabs class="tabs-layout mb16" v-model="active" @on-click="onTabs" :animated="false">
        <TabPane v-for="(item,index) in list" :label="item.label" :name="item.value" :key="index">
            <div class="tableContent">
                <Table class="resizable-table"  @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,this.customCacheKey)}" :columns="columns"
                       :data="dataSource[active]" border>
                    <template slot-scope="{ row,index }" slot="action">
                        <div class="ivu-table-cell-slot" v-if="!disabled">
                            <span class="operationBtn" v-if="row.operation ==='action'"
                                  @click="addItem">{{ $t('新增') }}</span>
                            <span v-if="row.operation !=='action' " class="operationBtn"
                                  @click="removeItem(index)">{{ $t('删除') }}</span>
                            <span v-if="row.operation !=='action' && !row.edit " class="operationBtn"
                                  @click="editItem(index)">{{ row.edit ? $t('更新') : $t('编辑') }}</span>
                            <span v-if="row.operation !=='action' && row.edit " class="operationBtn"
                                  @click="saveItem(index)">{{ $t('提交') }}</span>
                            <span v-if="row.operation !=='action' && row.edit " class="operationBtn"
                                  @click="cancelSaveItem(index)">{{ $t('取消') }}</span>
                        </div>
                    </template>
                    <template slot-scope="{ row,index }" slot="type">
                        <Input maxlength="200" v-model="dataSource[active][index].type" :placeholder="$t('请输入')"
                               v-if="row.operation !=='action'  && dataSource[active][index].edit"/>
                        <p class="breakSpaces" style="text-align: left" v-else>{{ dataSource[active][index].type }}</p>
                    </template>
                    <template slot-scope="{ row,index }" slot="demands">
                        <Input maxlength="200" v-model="dataSource[active][index].demands" :placeholder="$t('请输入')"
                               v-if="row.operation !=='action'  && dataSource[active][index].edit"/>
                        <p class="breakSpaces" style="text-align: left" v-else>{{ dataSource[active][index].demands }}</p>
                    </template>
                </Table>
            </div>
        </TabPane>
    </Tabs>
</template>
<script>
const totalComlumns = {desc: "Total Capital without tax", demands: "", operation: "action", type: ""}
import mixins from "./mixins"

export default {
    name: "contractSignOffTab.vue",
    props: ['primevalList', 'disabled', 'satIsRequired'],
    mixins: [mixins],
    data() {
        return {
            active: 1,
            list: [{label: "SAT", value: 1}, {label: "CAT", value: 2}, {label: "FAT", value: 3}],
            dataSource: {
                1: [],
                2: [],
                3: []
            },
            columns: [
                {
                    title: this.$t('类型'),
                    key: "type",
                    slot: "type",
                    resizable:true,
                    renderHeader: (h) => {
                        return h('div', [
                            h('span', {
                                domProps: {
                                    innerHTML: this.$t('类型')
                                },
                                attrs: {
                                    class: "required "
                                }
                            }),
                        ])
                    }
                },
                {
                    title: this.$t('要求'),
                    key: "demands",
                    slot: "demands",
                    resizable:true,
                    renderHeader: (h) => {
                        return h('div', [
                            h('span', {
                                domProps: {
                                    innerHTML: this.$t('要求')
                                },
                                attrs: {
                                    class: "required "
                                }
                            }),
                        ])
                    }
                },
                {
                    title: this.$t('操作'),
                    key: "Items",
                    slot: "action",
                    align: "center",
                    width: this.util.autoWidth(200, 300)
                }
            ],
            customCacheKey:"contractSignOffTab1"
        }
    },
    watch: {
        active: function (a, b) {
            let isEditIndex = 0;
            for (let [key, value] of Object.entries(this.dataSource)) {
                const _value = value.find(item => item.edit)
                if (_value) {
                    isEditIndex = key / 1
                }
            }

            if (isEditIndex > 0 && isEditIndex != a) {
                setTimeout(() => {
                    this.active = isEditIndex
                    this.$Message.error(this.$t('请先保存'))
                }, 10)
            }
            // this.cancelSaveItem(this.activeIndex, b)
        },
        satIsRequired: function (value) {
            if (value == 1) {
                this.active = 1
                this.list.unshift({label: "SAT", value: 1})
                // this.dataSource[1] = [{...totalComlumns}]
                // this.$forceUpdate()
            } else {
                // delete this.dataSource[1]
                this.list.splice(0, 1)
                this.active = 2
            }
        },
    },
    mounted() {
        this.getColumnWidth(this.columns, this.customCacheKey)
        this.dataSource = {
            1: [],
            2: [],
            3: []
        }
        if (Array.isArray(this.primevalList) && this.primevalList.length > 0)
            for (let i = 0; i < this.primevalList.length; i++) {
                let item = this.primevalList[i];
                item.edit = false
                item.indexCode = i + 1
                if (!Array.isArray(this.dataSource[item.processCode])) {
                    this.dataSource[item.processCode] = []
                }
                this.dataSource[item.processCode].push(JSON.parse(JSON.stringify(item)))
            }


        if (!this.disabled) {
            for (let [key,] of Object.entries(this.dataSource)) {
                // if (!(Array.isArray(this.dataSource[key]) && this.dataSource[key].length > 0)) {
                this.dataSource[key].push({...totalComlumns})
                // }
            }
        }
        if (this.satIsRequired == 0) {
            // delete this.dataSource[1]
            this.list.splice(0, 1)
            this.active = 2
        }

    },
    methods: {
        saveItem(index) {

            this.activeIndex = index

            if (!this.dataSource[this.active][this.activeIndex].type) {
                this.$Message.error(this.$t('请输入'))
                return;
            }
            if (!this.dataSource[this.active][this.activeIndex].demands) {
                this.$Message.error(this.$t('请输入'))
                return;
            }


            this.dataSource[this.active][this.activeIndex]['edit'] = false
            this.$forceUpdate()
        },
        cancelSaveItem(index, activeIndex) {
            if (!this.copyDataSource) {
                return;
            }
            const obj = this.copyDataSource[activeIndex || this.active].find(item => {
                if (this.dataSource[activeIndex || this.active].find(m => m.indexCode === item.indexCode))
                    return item
            })
            if (obj)
                this.dataSource[activeIndex || this.active].splice(index, 1, {...obj, edit: false})
            else
                this.dataSource[activeIndex || this.active].splice(index, 1)
        },
        checkEditStatus(list) {
            const _list = Array.isArray(list) ? list : this.dataSource[this.active]
            const obj = _list.find(item => item.edit)
            if (obj) {
                this.$Message.error(this.$t('请先保存'))
                return true
            } else {
                return false
            }
        },
        editItem(index) {
            if (this.checkEditStatus()) return false
            const list = this.dataSource[this.active]
            list[index]['edit'] = true
            this.$set(this.dataSource, this.active, list)

            this.activeIndex = index
            this.copyDataSource = JSON.parse(JSON.stringify(this.dataSource))
            this.$forceUpdate()
        },
        addItem() {

            if (this.checkEditStatus()) return false
            this.copyDataSource = JSON.parse(JSON.stringify(this.dataSource))
            const id = this.dataSource[this.active].length > 1 ? (this.dataSource[this.active][this.dataSource[this.active].length - 2].indexCode || 0) + 1 : 1
            const obj = {
                indexCode: id,
                demands: "",
                type: "",
                edit: true,
                processCode: this.active / 1
            }
            this.dataSource[this.active].splice(this.dataSource[this.active].length - 1, 0, obj)
        },
        removeItem(index) {
            this.dataSource[this.active].splice(index, 1)
        },
        onTabs(val) {
            this.customCacheKey = 'contractSignOffTab' + val
            this.getColumnWidth(this.columns, this.customCacheKey)
        },
        getParams() {
            const list = [];

            const dataSource = JSON.parse(JSON.stringify(this.dataSource));
            if (this.satIsRequired != 1)
                delete dataSource[1]
            for (let [, value] of Object.entries(dataSource)) {
                this.checkEditStatus(value)
                const _value = value.filter(item => !item.operation)
                _value.forEach(item => {
                    delete item.indexCode
                    // delete item.edit
                })
                list.push(..._value)
            }
            return list
        }
    }
}
</script>
